import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, Row, Col, Table, Modal, message } from 'antd';
import { toJS } from 'mobx';
import { WeaRightMenu, WeaTop, WeaTab, WeaErrorPage, WeaTools, WeaFormItem, WeaSearchGroup, WeaLocaleProvider, WeaDialog } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import Add from './Add';
import AddForm from './AddForm';
import AddBatch from './AddBatch';

const getLabel = WeaLocaleProvider.getLabel;

@inject('addCustomerStore')
@observer
class AddCustomer extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.doInit(this.props);
  }
  doInit(props) {
    const { location, addCustomerStore } = props;
    const { customerType, changeTab } = addCustomerStore;
    customerType();
    if (location.query && location.query.type) {
      changeTab(`${location.query.type}`);
    }
  }
  componentWillReceiveProps(nextProps) {
    const keyOld = this.props.location.key;
    const keyNew = nextProps.location.key;
    // 点击菜单路由刷新组件
    if (keyOld !== keyNew) {
      const { addCustomerStore } = nextProps;
      const { customerType } = addCustomerStore;
      addCustomerStore.clearStatus();
      customerType();
    }
  }
  componentWillUnmount() {
    const { addCustomerStore } = this.props;
    addCustomerStore.clearStatus();
  }
  render() {
    const { addCustomerStore } = this.props;
    const { title, loading, form, baseParams, tabDatas, selectKey, noRecord, tooManyRecord, recordDatas, columns, addForm, isrefresh } = addCustomerStore;
    const formParams = form.getFormParams() || {};
    return (
      <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@h01lt2`} datas={noRecord ? this.getRightMenu1() : this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
        <WeaTop
          ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@pf7uq2`}
          title={title}
          loading={loading}
          icon={<i className="icon-coms-crm" />}
          iconBgcolor="#96358a"
          buttons={this.getButtons(this.props.ecId || '')}
          buttonSpace={10}
          showDropIcon
          dropMenuDatas={noRecord ? this.getRightMenu1() : this.getRightMenu()}
          onDropMenuClick={this.onRightMenuClick}
        >
          <WeaTab
            ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@p4de8n`}
            selectedKey={selectKey}
            keyParam="key" // 主键
            onChange={this.changeTab.bind(this)}
            datas={toJS(tabDatas)}
          />
          {// 普通新建
            selectKey == '1' &&
                        (!noRecord ?
                          <div className="crm-add-container">
                            {this.getAddForms()}
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xfimef`} className="crm-add-row">
                              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0pzx7l`} span="24">{getLabel(20272, '请输入客户名称，系统将搜索是否有重名客户。')}</Col>
                            </Row>
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yfwsl5`} className="crm-add-row">
                              <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@81sj4p`} span="24">{getLabel(20273, '如已有类似名称客户存在，系统将给出提醒，否则直接进入新建客户卡片页面。')}</Col>
                            </Row>
                            {
                              tooManyRecord ?
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@un4juc`} className="crm-add-row">
                                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@evzupp`} span="24" style={{ color: 'red' }}>{getLabel(15126, '搜索的结果太多无法显示! 请提供更精确的关键字搜索!')}</Col>
                                </Row> : null
                            }
                            {
                              (recordDatas.length > 0 || tooManyRecord) &&
                              <div style={{ padding: '0' }} className="wea-crm-table-edit">
                                <Table
                                  ecId={`${this && this.props && this.props.ecId || ''}_Table@2gs0ve`}
                                  className="crm-cusotmer-add-table"
                                  rowKey="id"
                                  loading={false}
                                  columns={columns}
                                  dataSource={toJS(recordDatas)}
                                  pagination={false}
                                />
                              </div>
                            }
                          </div> : <div><Add ecId={`${this && this.props && this.props.ecId || ''}_Add@u0846n`} listStore={addCustomerStore} /></div>)
          }
          {// 批量导入
            selectKey == '2' &&
            <div><AddBatch ecId={`${this && this.props && this.props.ecId || ''}_AddBatch@xr2a69`} key={isrefresh} contentStore={addCustomerStore} /></div>
          }
        </WeaTop>
      </WeaRightMenu>);
  }
  getRightMenu() {
    const { recordDatas, loading, selectKey } = this.props.addCustomerStore;
    const btns = [];
    {
      selectKey == '1' &&
                btns.push({
                  icon: <i className="icon-coms-search" />,
                  content: getLabel(197, '搜索'),
                  key: 0,
                });
    }

    {
      selectKey == '1' &&
                btns.push({
                  icon: <i className="icon-coms-Revoke" />,
                  content: getLabel(1256, '继续'),
                  disabled: !(recordDatas.length > 0),
                  key: 1,
                });
    }

    {
      selectKey == '2' &&
                btns.push({
                  icon: <i className="icon-coms-Approval " />,
                  content: getLabel(615, '提交'),
                  disabled: loading,
                  key: 6,
                });
    }
    {
      selectKey == '2' &&
                btns.push({
                  icon: <i className="icon-coms-Print-log " />,
                  content: getLabel(83, '日志'),
                  key: 7,
                });
    }
    return btns;
  }
  getRightMenu1() {
    const { loading } = this.props.addCustomerStore;
    const btns = [];
    btns.push({
      icon: <i className="icon-coms-Preservation" />,
      content: getLabel(86, '保存'),
      disabled: loading,
      key: 2,
    });
    btns.push({
      icon: <i className="icon-coms-Revoke" />,
      content: getLabel(201, '取消'),
      key: 3,
    });
    return btns;
  }
    onRightMenuClick = (key) => {
      const { addCustomerStore } = this.props;
      if (key == '0') { // 搜索
        addCustomerStore.myCustomerListForAdd();
      }
      if (key == '1') { // 继续
        addCustomerStore.myCustomerListForAdd(true);
      }
      if (key == '2') { // 保存
        addCustomerStore.saveCustomers();
      }
      if (key == '3') { // 取消
        addCustomerStore.changeTab('1');
      }
      if (key == '6') { // 提交
        addCustomerStore.submitImport();
      }
      if (key == '7') { // 查看日志
        addCustomerStore.initDatas();
        addCustomerStore.getLog();
        addCustomerStore.showLog = true;
      }
    }
    getButtons(ecId) {
      const { addCustomerStore } = this.props;
      const { noRecord, selectKey, myCustomerListForAdd, saveCustomers, submitImport, loading } = addCustomerStore;
      const btnArr = [];
      {
        selectKey == '1' && (noRecord ?
          btnArr.push(<Button ecId={`${ecId}_Button@2ijqn2@save`} type="primary" disabled={loading} onClick={() => { saveCustomers(); }}>{getLabel(86, '保存')}</Button>) :
          btnArr.push(<Button ecId={`${ecId}_Button@ochswv@search`} type="primary" onClick={() => { myCustomerListForAdd(); }}>{getLabel(197, '搜索')}</Button>)
        );
      }
      {
        selectKey == '2' && btnArr.push(<Button ecId={`${ecId}_Button@phazl4@submit`} type="primary" disabled={loading} onClick={() => { submitImport(); }}>{getLabel(615, '提交')}</Button>);
      }
      return btnArr;
    }
    changeTab(key) {
      const { changeTab } = this.props.addCustomerStore;
      changeTab(key);
    }
    getAddForms = () => {
      const { addCustomerStore } = this.props;
      const { addInfo, form } = addCustomerStore;
      const { isFormInit } = form;
      const group = [];
      isFormInit && toJS(addInfo).map((c, i) => {
        const items = [];
        c.items.map((fields, index) => {
          items.push({
            com: (<WeaFormItem
              ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wthzk2@${fields.domkey[0]}`}
              label={`${fields.label}`}
              labelCol={{ span: `${fields.labelcol}` }}
              error={form.getError(fields)}
              wrapperCol={{ span: `${fields.fieldcol}` }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@hfzqb7@${fields.domkey[0]}`} fieldConfig={fields} form={form} />
            </WeaFormItem>),
            colSpan: 1,
          });
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ws2mgr@${i}`} needTigger col={1} title={getLabel(1361, '基本信息')} showGroup items={items} />);
      });
      return group;
    }
}

export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@i4hid7`} msg={props.error ? props.error : '对不起，该页面异常，请联系管理员！'} />,
  { error: '' },
)(AddCustomer);
